<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2023-01-04 20:09:04
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-01-05 19:52:29
 * @FilePath: \vue-test\elementUi\src\pages\BannerPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
      <el-button style="margin-bottom: 30px;" @click="openBannerForm">添加轮播图</el-button>
      <el-table  v-loading="loading" :data="tableDataList.tableData.slice(index, index + pagesize)" border style="width: 100%">
        <el-table-column prop="img" label="图片" width="180">
          <template #default="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.img" fit="contain" />
          </template>
        </el-table-column>
        <el-table-column prop="alt" label="文案" width="180" />
        <el-table-column prop="link" label="跳转地址" />
        <el-table-column label="上线">
          <template #default="scope">
            <el-switch v-model="scope.row.flag" @change="(flag)=>onStatusChange(scope.row.bannerid,flag)"/>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div>
              <el-icon @click="bannermove(scope.row.bannerid)" style="cursor: pointer;">
                <Delete />
              </el-icon>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next"
        :total="tableDataList.tableData.length"
        :page-size="pagesize"
        @current-change="currentChange"
      />
      <el-dialog
        v-model="dialogVisible"
        title="添加轮播图"
      >
        <BannerForm @on-add-succuss="onAddSuccess"></BannerForm>
      </el-dialog>
    </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { getBannerList, removeBanner,updateBannerStatus } from '../services/index'
import BannerForm from '../components/BannerForm.vue'
import { ref,reactive } from 'vue'

//数据
let tableDataList = reactive({
  tableData:[]
})
//拉取数据
const fetchBannerList = ()=>{
    getBannerList().then((result)=>{
      tableDataList.tableData = (result.data.data)
      loading.value = false
    })
}
//初始化渲染
fetchBannerList()
//删除banner
const bannermove = (bannerid)=>{
  removeBanner(bannerid).then(()=>{
    //拉取数据
    fetchBannerList()
    ElMessage.success('删除成功')
})
}

//下标
let index = ref(0)
//页面展示数据
let pagesize = ref(2)
//设置当前页
const currentChange = (page)=>{
    index.value = (page - 1) * pagesize.value
}


//修改显示
let dialogVisible = ref(false)
const openBannerForm = ()=>{
    dialogVisible.value = true
}
//添加成功
const onAddSuccess = ()=>{
    dialogVisible.value = false
    //拉取数据
    fetchBannerList()
}

//传递bannerid，flag
const onStatusChange = (bannerid,flag)=>{
    updateBannerStatus({
        bannerid,
        flag
    })
}

//加载
let loading = ref(true)

</script>
<style scoped>
 .pager {
      margin-top: 30px;
    }
</style>